<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <!-- 引入Vue -->
    <script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body style="color: rgb(51, 51, 51)">
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>PM合同台账</el-breadcrumb-item>
        </el-header>
        <el-main>
        </el-main>
    </el-container>

</div>
<div id="test" style="width: 100%;height:800px;"></div>

</body>
<script src="/echarts/echarts.js"></script>
<script src="/echarts/macarons.js"></script>
<script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
    var myChart = echarts.init(document.getElementById('test'), 'dark');
    var abc = {};
    myChart.showLoading();
    var dtf = false;
    $.ajax({
        url: 'http://47.110.42.153:8083/contractReport',
        type: 'get',
        async: false,
        success: function (result) {
            if (result.result) {
                abc = result.data;
                dtf = true;
            }
        }
    });

    // 基于准备好的dom，初始化echarts实例

    var shu = [];
    var a = [];
    var b = [];
    var c = [];
    var d = [];
    var e = [];
    var f = [];
    for (var o in abc.rows){
        shu.push(abc.rows[o].contractName);
        if(abc.rows[o].contractTotalAmount == null){
            a.push(0);
        }else{
            a.push(abc.rows[o].contractTotalAmount);
        }
        if(abc.rows[o].contractCompletionAmount == null){
            b.push(0);
        }else{
            b.push(abc.rows[o].contractCompletionAmount);
        }
        if(abc.rows[o].contractInvoicedAmount == null){
            c.push(0);
        }else{
            c.push(abc.rows[o].contractInvoicedAmount);
        }
        if(abc.rows[o].contractReceiptAmount == null){
            d.push(0);
        }else{
            d.push(abc.rows[o].contractReceiptAmount);
        }
        if(abc.rows[o].contractUnReceiptAmount == null){
            e.push(0);
        }else{
            e.push(abc.rows[o].contractUnReceiptAmount);
        }
        if(abc.rows[o].contractFinanceAmount == null){
            f.push(0);
        }else{
            f.push(abc.rows[o].contractFinanceAmount);
        }
    }


    // 指定图表的配置项和数据
    var option = {
        dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 1,
                end: 35
            },
            {
                type: 'slider',
                show: true,
                yAxisIndex: [0],
                left: '93%',
                start: 29,
                end: 36
            },
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 35
            },
            {
                type: 'inside',
                yAxisIndex: [0],
                start: 29,
                end: 36
            }
        ],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['合同总金额', '结算金额','累计开票金额','已付金额','未付金额','财务成本金额']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value',
            axisLabel: {
                interval: 0,
                formatter:function(value)
                {

                    var ret = "";//拼接加\n返回的类目项
                    var maxLength = 2;//每项显示文字个数
                    var valLength = value.length;//X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1)//如果类目项的文字大于3,
                    {
                        for (var i = 0; i < rowN; i++) {
                            var temp = "";//每次截取的字符串
                            var start = i * maxLength;//开始截取的位置
                            var end = start + maxLength;//结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = value.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    }
                    else {
                        return value;
                    }
                }
            }
        },
        yAxis: {
            type: 'category',
            data: shu
        },
        series: [
            {
                name: '合同总金额',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: a
            },
            {
                name: '结算金额',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: b
            },
            {
                name: '累计开票金额',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: c
            },
            {
                name: '已付金额',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: d
            },
            {
                name: '未付金额',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: e
            },
            {
                name: '财务成本金额',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: e
            }
        ]
    };
    if(dtf){
        myChart.hideLoading();
        myChart.setOption(option);
    }
    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);
</script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        methods: {

        },
        async mounted() {

        }
    })
</script>

</html>